React 脚手架搭建全过程 | 您所在的位置:网站首页 › react 脚手架下载 › React 脚手架搭建全过程 |
1. 安装 create-react-app npx create-react-app react-mycli cd react-mycli yarn start (安装yarn 命令 : npm install -g yarn ) 2. 安装 Ant Desiginyarn add antd 3. 配置 Ant Design 按需加载第一步:安装 react-app-rewired 为项目添加 webpack 配置,安装完成 后 在项目的根目录中新建 config-overrides.js 文件; yarn add react-app-rewired 第二步:修改 package.json 文件,修改如下
yarn add customize-cra 第四部:在根目录里添加 config-override.js 文件,如下所示:
第五步:配置按需加载,我们需要使用 babel-plugin-import,它是一 个用于按需加载组件代码和样式的babel插件 yarn add babel-plugin-import 接着配置webpack ,修改 config-overrides.js ,修改后如下所示
第一步:安装 react-router-dom react-router-config yarn add react-router-dom yarn add react-router-config 安装 @loadable/component 实现路由组件按需加载 yarn add @loadable/component 安装完成,一切准备就绪,下面我们就开始配置路由 第二步:在src文件夹下新建一个路由文件夹,用于放置路由的配置文 件,命名 router ;在 router 里新建一个 router.js 引入所需要使用的依赖包 创建Loading 组件,引入,用于组件加载前loading显示,增加用户体 验,如下所示,至于为什么这样使用,请看 @loadable/component 文档
首先进入 App.js 引入 react-router-dom react-router-config 其次引入路由配置文件 router/index.js 具体实现代码如下所示: BrowserRouter 是 react-router-dom 提供的 api ,具体使用方法请参考react-router-dom 文档 到这一步,第一层理由已经可以实现了,浏览器里输入对应的路由,即可显示对应的组件;下面来说说嵌套路由(子路由)如何实现: 从上面路由配置文件 router/index.js 文件中可以看出,/detail 下面存在子路由 /detail/system 要想实现其实很简单,只需要在Detail 组件中重新调用一下 renderRoutes 方法即可,当然在调用之前,还是需要引用一下 react-router-config 和 react-router-dom ,子路由的获取,通过 this.props.route 获取,详细用法参考以下代码: 子组件获取穿过来值得方法,只需要通过 this.props.属性 即可获取;代码实现如下: 到这里,路由的配置就已经完成了。 下一章节,我们开始集成 react-redux redux-saga 敬请期待 |
CopyRight 2018-2019 实验室设备网 版权所有 |